<!doctype html>
<html class="no-js">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="icon" type="image/x-icon" href="/favicon.ico">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>前台-登录</title>

		<!-- Set render engine for 360 browser -->
		<meta name="renderer" content="webkit">

		<!-- No Baidu Siteapp-->
		<meta http-equiv="Cache-Control" content="no-siteapp" />



		<!-- Add to homescreen for Chrome on Android -->
		<meta name="mobile-web-app-capable" content="yes">


		<!-- Add to homescreen for Safari on iOS -->
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />


		<!-- Tile icon for Win8 (144x144 + tile color) -->

		<meta name="msapplication-TileColor" content="#0e90d2">

		<link rel="stylesheet" href="/assets/css/amazeui.min.css">
		<link rel="stylesheet" href="/assets/css/app.css">
		<link rel="stylesheet" href="/assets/css/style.css" />

<!--		<link rel="stylesheet" type="text/css" href="assets/fonts/iconclass/iconfont.css">-->
	</head>
	<style type="text/css">
		body {
	   background-image: url(/assets/images/ol_tpbp-02.jpg);
	   background-repeat: no-repeat;
	   background: cover;
	   opacity: 0.7;
          }

.am-lg-text {
	margin-top: 130px;
	margin-left: 150px;
}

.am-lg-text h1 {
	color: #FFFFFF;
	font-size: 33px;
}

.am-lg-text P {
	color: #FFFFFF;
}


/*form*/

.am-form {
	height: 450px;
	width: 340px;

	/*z-index: 0;*/
	border-radius: 10px;
	background-color:#272727;
	position: absolute;
	left: 800px;
	top: 70px;

}

.tips-user h2
{
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7), 0px 2px 0 rgba(0, 0, 0, .5);

    text-align: center;
    color: #666;
    margin: 30px 0 50px 0;
    letter-spacing: 4px;
    font: normal 26px/1 Verdana, Helvetica;
    position: relative;
}
 .tips-user h2:after, .tips-user h2:before
{
    background-color: #777;
    content: "";
    height: 1px;
    position: absolute;
    top: 15px;
    width: 130px;
}
  .tips-user h2:after
{
    background-image: -webkit-gradient(linear, left top, right top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(left, #777, #fff);
    background-image: -moz-linear-gradient(left, #777, #fff);
    background-image: -ms-linear-gradient(left, #777, #fff);
    background-image: -o-linear-gradient(left, #777, #fff);
    background-image: linear-gradient(left, #777, #fff);
    right: 0;
}

 .tips-user h2:before
{
    background-image: -webkit-gradient(linear, right top, left top, from(#777), to(#fff));
    background-image: -webkit-linear-gradient(right, #777, #fff);
    background-image: -moz-linear-gradient(right, #777, #fff);
    background-image: -ms-linear-gradient(right, #777, #fff);
    background-image: -o-linear-gradient(right, #777, #fff);
    background-image: linear-gradient(right, #777, #fff);
    left: 0;
}
.am-form-group{
	width: 100%;

}
.am-form-group>label{
	color: #FFFFDD;


}
.am-btn{
	background:	#d0d0d0	 ;
}
.username-field{

}
.am-checkbox input{
	color: #FFFFFF;
}
.forget-pwd{
	margin-left: 250px;
}
.reigister{
	margin-left: 250px;
}

	</style>

	<body>
		<div class="am-lg-text">
			<h1 class="am-sans-serif">校园知事，知道你想知道的事</h1>
			<p>热门话题，精彩信息</p>
			<p>————用零碎的时间，发现更大的世界</p>
		</div>

		<form class="am-form" action="/prev_login" method="post">
			<div class="tips-user">
				<h2>登录</h2>
			</div>
			<div class="am-form-group ">
				<label for="username">用户名：</label>
				<input type="text" id="username"    autofocus="autofocus"  maxlength="16"  class="username-field" placeholder="用户名" name="username"/>
			</div>
			<div class="am-form-group ">
			 <label for="pwd">密码：</label>
				<input type="password" id="pwd" placeholder="密码" autofocus="autofocus"  maxlength="30" class="psw-filed" name="password"/>
			</div>
			<div class="am-checkbox">
				<label>
            <input type="checkbox" > 记住登录
               </label>
			</div>
			<input type="submit" class="am-btn" value="登录" onclick="return checkInfo();"/>
			<button class="am-btn " style="margin-left: 100px;" onclick="return BackTohome();">返回</button>
			<br/><br/>
			<div class="forget-pwd">
				<a href="###" id="forgetpwd" class="am-btn  am-btn-xs" onclick="loss(this);">忘记密码？</a>
			</div>
			<div class="reigister">
				<a href="/register">注册</a>
			</div>
		</form>

	</body>

	<!--[if (gte IE 9)|!(IE)]><!-->
	<script src="/assets/js/jquery.min.js"></script>
	<!--<![endif]-->
	<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
	<script src="/assets/js/amazeui.min.js"></script>
		<script type="text/javascript" src="/assets/layer/layer.js"></script>
	<script>
	 function loss(t) { layer.tips('请仔细回忆', $(t), { tips:1}); };

		function checkInfo() {
			var $username = $('#username');
			if($username.val().trim() == '') {
				layer.msg('用户名为空，请输入', {
					icon: 5,
					offset: '30%',
					time: 2000
				});
				$username.focus();
				return false;
			}
			var $pwd = $('#pwd');
			if($pwd.val().trim() == '') {
				layer.msg('请输入密码', {
					icon: 5,
					offset: '30%',
					time: 2000
				});
				$pwd.focus();
				return false;
			}
			return true;

		}
		function BackTohome(){
		window.location.href="/"
		return false;
	}
	</script>
	</body>
	</html>
